:deep(.drawer_source) {
  width: 74% !important;

  .layer_inside {
    height: 100%;
    padding: 0 0 24px 0;
    box-sizing: border-box;
    overflow: hidden;

    .layer_header {
      background: white;
      height: 36px;
      overflow: hidden;
      font-size: 18px;
      margin: 8px 0 8px 0;
      padding-left: 28px;
      box-sizing: border-box;
      color: #333333;
      font-weight: 500;
      border-left: 6px #3078ff solid;
      display: flex;
      flex-direction: row;
      align-self: center;
      align-items: center;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: inherit;
      }
    }

    .layer_content {
      padding: 0 20px;
      margin-top: 20px;
      box-sizing: border-box;
      overflow: hidden;
      height: calc(100% - 36px - 16px - 60px);

      .screen-area {
        justify-content: flex-start;
        margin-bottom: 0;
      }

      .content-area {
        display: flex;
        height: calc(100%);
        flex-direction: row;
        box-sizing: border-box;
        justify-content: space-between;

        .left {
          min-width: 49.4%;
          max-width: 49.4%;;
          display: flex;
          flex-direction: column;

          .name-inside {
            @include singleEllipsis(100%)
          }
        }

        .right {
          min-width: 49.4%;
          max-width: 49.4%;;
          display: flex;
          flex-direction: column;

          .name-inside {
            @include singleEllipsis(100%)
          }

          .delete {
            cursor: pointer;

            &:hover {
              color: #01a0fa;
            }
          }
        }

        .flex-box-right {
          display: flex;
          margin-left: 6px;
          box-sizing: border-box;
          flex-direction: column;
          overflow: hidden;
          height: calc(100% - 4px);

          .header-area {
            line-height: 54px;
            color: #909399;
            overflow: hidden;
            background: #f1f4f8 !important;

            .item {
              flex: 3;
              text-align: center;
              padding: 0 8px;
              border-right: none;
            }

            .operator {
              display: flex;
              flex: 1;
              justify-content: center;
              padding: 0 10px;
            }
          }

          .list-group {
            width: 100%;
            height: 346px;
            overflow: auto;
          }

          .item-wrap {
            width: 100%;
            display: flex;
            line-height: 48px;
            border-bottom: 1px #EBEEF5 solid;

            .item {
              flex: 3;
              text-align: center;
              padding: 0 8px;
              border-right: 1px #EBEEF5 solid;
            }

            .name {
              white-space: nowrap;
              @include singleEllipsis(100%)
            }

            .operator-box {
              display: flex;
              flex: 1;
              padding: 0 10px;

              .operator-item {
                flex: 1;

                i {
                  font-size: 18px;
                  cursor: pointer;
                }

                &:hover {
                  color: #01a0fa;
                }
              }
            }
          }

          .list-area {
            height: calc(100% - 54px - 12px);
          }
        }
      }
    }

    .footer-area {
      height: 60px;
      display: flex;
      align-self: center;
      align-items: center;
      align-content: center;
      justify-content: flex-end;
      padding: 0 20px;

      .inside-item {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
    }
  }
}
